/** 获取选择器弹框坐标 */
export const getCursorPosition  = function () {
  const { x, y } = window.getSelection().getRangeAt(0).getBoundingClientRect()
  // 获取编辑器的坐标
  const editorDom = window.document.querySelector('#atInput')
  const { x: eX, y: eY } = editorDom.getBoundingClientRect()
  // 光标所在位置
  this.cursorPosition = { x: x - eX, y: y - eY }
}
/**获取用户下拉列表 */
export const fetchOptions = function (key) {
  if (this.timer) {
    clearTimeout(this.timer)
    this.timer = null
  }
  this.timer = setTimeout(async () => {
    // const _options = await onRequest(key)
    this.options = [{id:_.guID(), wechatAvatarUrl:'',name:'zhangsan'}, {id:_.guID(), wechatAvatarUrl:'',name:'lisi'},]
  }, 500)
}

export const onObserveInput = function () {
  let cursorBeforeStr = ''
  const selection = window.getSelection()
  if(selection.focusNode.data) {
    cursorBeforeStr = selection.focusNode.data.slice(0, selection.focusOffset);
  }
  this.focusNode = selection.focusNode
  const lastAtIndex = cursorBeforeStr?.lastIndexOf('@');
  this.currentAtIdx = lastAtIndex
  if (lastAtIndex !== -1) {
      this.getCursorPosition();
      // const searchStr = cursorBeforeStr.slice(lastAtIndex + 1);
      this.visible = true
      // if (!StringTools.isIncludeSpacesOrLineBreak(searchStr)) {
      //   this.searchStr = searchStr
      //   this.fetchOptions(searchStr);
      //   this.visible = true
      // } else {
      //   this.visible = false
      //   this.searchStr = ''
      // }
  } else {
    this.visible = false
  }
}
export const selectAtSpanTag = function (target) {
  window.getSelection()?.getRangeAt(0).selectNode(target);
}
export const editorClick = async function (e) {
  this.onObserveInput();
  // 判断当前标签名是否为span 是的话选中当做一个整体
  if (e.target.localName === 'span') {
    this.selectAtSpanTag(e.target);
  }
}
export const editorChange = function (event) {
  const { innerText } = event.target
  this.content = innerText
  this.onObserveInput();
};
/**
 * @param id 唯一的id 可以uid
 * @param name 用户姓名
 * @param color 回显颜色
 * @returns
 */
export const createAtSpanTag = function (id, name, color = 'blue') {
  const ele = document.createElement('span');
  ele.class = 'at-span';
  ele.style.color = color;
  ele.id = id.toString();
  ele.contentEditable = 'false';
  ele.innerText = `@${name}`;
  return ele;
};
/**
 * 选择用户时回调
 */
export const onSelect = function (item){
  console.log(item)
  const selection = window.getSelection()
  const range = selection?.getRangeAt(0);
  // 选中输入的 @关键字  -> @郑
  range.setStart(this.focusNode, this.currentAtIdx);
  range.setEnd(this.focusNode, this.currentAtIdx + 1 + this.searchStr.length);
  // 删除输入的 @关键字
  range.deleteContents();
  // 创建元素节点
  const atEle = this.createAtSpanTag(item.id, item.name);
  // 插入元素节点
  range.insertNode(atEle);
  // 光标移动到末尾
  range.collapse();
  // 缓存已选中的用户
  this.selected = [...this.selected, item]
  // 选择用户后重新计算content
  this.content = document.getElementById('atInput')?.innerText
  // 关闭弹框
  this.visible = false
  // 输入框聚焦
  this.$refs.atRef.focus();
};

export const getAttrIds = function () {
  const spans = document.querySelectorAll('.at-span');
  let ids = new Set();
  spans.forEach((span) => ids.add(span.id));
  return this.selected.filter((s) => ids.has(s.id));
};